<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script>
			window.onload =function(){
				var canvas =document.getElementById("canvas");
				var cxt =canvas.getContext("2d");
				canvas.width =400;
				canvas.height =300;
				createPolygon(50,50,5,40,cxt);
				var movex,movey;
				//创建一个正多边形绘制函数
				function createPolygon(dx,dy,n,size,cxt){
					cxt.beginPath();
					for(i=0;i<n;i++ ){
						var x=size*Math.cos(i*2*Math.PI/n)+dx;
						var y =size*Math.sin(i*2*Math.PI/n)+dy;
						cxt.lineTo(x,y);
					}
					cxt.fillStyle="red";
					cxt.fill();
					cxt.closePath();
				}
				canvas.addEventListener("mousedown",downfun);
				function downfun(e){
					var x=e.clientX;
					var y=e.clientY;
					if(cxt.isPointInPath(x,y)){
						canvas.addEventListener("mousemove",movefun);
						}
						canvas.addEventListener("mouseup",upfun);
					}
					function movefun(e){
						movex=e.clientX;
						movey=e.clientY;
						cxt.clearRect(0,0,canvas.width,canvas.height);
						createPolygon(movex,movey,5,40,cxt);
				}
				function upfun(){
					canvas.removeEventListener("mousemove",movefun);
				}
			}
		</script>
	</body>
</html>
